<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工具详情 - 家庭工具管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-50 h-full">
    <!-- 页面内容 -->
    <div class="h-full flex flex-col">
        <!-- 顶部导航栏 -->
        <div class="bg-white shadow-sm">
            <div class="flex items-center justify-between px-4 py-3">
                <button onclick="window.parent.navigateTo('tools.html')" class="p-1 text-gray-500">
                    <i class="fa fa-arrow-left"></i>
                </button>
                <h1 class="text-lg font-medium text-dark">工具详情</h1>
                <button class="p-1 text-gray-500">
                    <i class="fa fa-ellipsis-v"></i>
                </button>
            </div>
        </div>
        
        <!-- 工具图片和基本信息 -->
        <div class="bg-white p-4 border-b border-gray-100">
            <div class="flex items-start">
                <div class="w-32 h-32 rounded-xl overflow-hidden bg-gray-100 flex-shrink-0">
                    <img src="https://images.unsplash.com/photo-1586495777744-4413f21062fa?q=80&w=2070&auto=format&fit=crop" alt="电动螺丝刀" class="w-full h-full object-cover">
                </div>
                
                <div class="ml-4 flex-1">
                    <div class="flex justify-between items-start">
                        <h2 class="text-xl font-bold text-dark">电动螺丝刀</h2>
                        <span class="status-badge bg-green-100 text-green-800">在用</span>
                    </div>
                    
                    <div class="mt-2 space-y-1">
                        <p class="text-sm text-gray-600"><i class="fa fa-tag text-primary mr-1"></i> 品牌：博世</p>
                        <p class="text-sm text-gray-600"><i class="fa fa-folder-open-o text-primary mr-1"></i> 类别：电动工具 → 螺丝刀类</p>
                        <p class="text-sm text-gray-600"><i class="fa fa-map-marker text-primary mr-1"></i> 存放位置：车库工具箱</p>
                        <p class="text-sm text-gray-600"><i class="fa fa-calendar text-primary mr-1"></i> 购买日期：2022-03-15</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 详细信息标签页 -->
        <div class="bg-white shadow-sm">
            <div class="flex border-b">
                <button class="flex-1 py-3 text-center text-sm font-medium text-primary border-b-2 border-primary">基本信息</button>
                <button class="flex-1 py-3 text-center text-sm font-medium text-gray-500">使用记录</button>
                <button class="flex-1 py-3 text-center text-sm font-medium text-gray-500">保养记录</button>
                <button class="flex-1 py-3 text-center text-sm font-medium text-gray-500">耗材管理</button>
            </div>
        </div>
        
        <!-- 标签页内容 -->
        <div class="flex-1 overflow-y-auto">
            <div class="bg-white p-4">
                <div class="space-y-4">
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">价格</span>
                        <span class="font-medium">¥499.00</span>
                    </div>
                    <div class="border-t border-gray-100"></div>
                    
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">保修期限</span>
                        <span class="font-medium">24个月</span>
                    </div>
                    <div class="border-t border-gray-100"></div>
                    
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">尺寸</span>
                        <span class="font-medium">180mm × 50mm × 25mm</span>
                    </div>
                    <div class="border-t border-gray-100"></div>
                    
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">重量</span>
                        <span class="font-medium">0.8kg</span>
                    </div>
                    <div class="border-t border-gray-100"></div>
                    
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">颜色</span>
                        <span class="font-medium">蓝色</span>
                    </div>
                    <div class="border-t border-gray-100"></div>
                    
                    <div>
                        <div class="text-gray-600 mb-2">特殊功能</div>
                        <p class="text-sm">无线充电，多种扭矩调节，LED照明，正反转向，自动刹车功能</p>
                    </div>
                    <div class="border-t border-gray-100"></div>
                    
                    <div>
                        <div class="text-gray-600 mb-2">标签</div>
                        <div class="flex flex-wrap gap-2">
                            <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">常用</span>
                            <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">电动工具</span>
                            <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">DIY</span>
                        </div>
                    </div>
                    <div class="border-t border-gray-100"></div>
                    
                    <div>
                        <div class="text-gray-600 mb-2">备注</div>
                        <p class="text-sm">购买于京东商城，带有原装充电器和6个批头，日常用于家具组装和维修。</p>
                    </div>
                </div>
            </div>
            
            <!-- 使用统计信息 -->
            <div class="mt-3 bg-white p-4">
                <h3 class="text-base font-medium text-dark mb-3">使用统计</h3>
                
                <div class="grid grid-cols-2 gap-4 mb-3">
                    <div class="bg-gray-50 rounded-lg p-3 text-center">
                        <div class="text-2xl font-bold text-primary">24</div>
                        <div class="text-xs text-gray-500 mt-1">总使用次数</div>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-3 text-center">
                        <div class="text-2xl font-bold text-blue-500">7</div>
                        <div class="text-xs text-gray-500 mt-1">本月使用次数</div>
                    </div>
                </div>
                
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">最近使用</span>
                    <span class="text-sm">昨天 14:30</span>
                </div>
                <div class="border-t border-gray-100 mt-2"></div>
                
                <div class="flex justify-between items-center mt-2">
                    <span class="text-gray-600">预计下次保养</span>
                    <span class="text-sm text-amber-600">10天后</span>
                </div>
            </div>
        </div>
        
        <!-- 底部操作按钮 -->
        <div class="bg-white p-4 border-t border-gray-100">
            <div class="flex space-x-3">
                <button class="flex-1 py-3 bg-primary text-white rounded-xl font-medium">
                    <i class="fa fa-hand-paper-o mr-1"></i> 借出工具
                </button>
                <button class="flex-1 py-3 bg-gray-100 text-gray-700 rounded-xl font-medium">
                    <i class="fa fa-pencil mr-1"></i> 编辑信息
                </button>
            </div>
        </div>
    </div>

    <script>
        // 页面加载完成后的处理
        document.addEventListener('DOMContentLoaded', function() {
            // 为标签页按钮添加点击事件
            const tabButtons = document.querySelectorAll('.flex.border-b button');
            tabButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除所有按钮的选中状态
                    tabButtons.forEach(btn => {
                        btn.classList.remove('text-primary', 'border-b-2', 'border-primary');
                        btn.classList.add('text-gray-500');
                    });
                    
                    // 设置当前按钮为选中状态
                    this.classList.remove('text-gray-500');
                    this.classList.add('text-primary', 'border-b-2', 'border-primary');
                    
                    // 这里可以添加标签页内容切换逻辑
                });
            });
            
            // 为借出工具按钮添加点击事件
            document.querySelector('.fa-hand-paper-o').parentElement.addEventListener('click', function() {
                window.parent.navigateTo('borrow_tool.html');
            });
            
            // 为编辑信息按钮添加点击事件
            document.querySelector('.fa-pencil').parentElement.addEventListener('click', function() {
                window.parent.navigateTo('edit_tool.html');
            });
            
            // 为右上角菜单按钮添加点击事件
            document.querySelector('.fa-ellipsis-v').parentElement.addEventListener('click', function() {
                // 显示更多操作菜单
                alert('显示更多操作菜单');
            });
        });
    </script>
</body>
</html>